<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <#include "common.ftl">
    <style>
        body {
            background-color: #F2F2F2;;
        }
    </style>
</head>
<body>
<ul class="layui-nav" lay-filter="tab">
    <li class="layui-nav-item"><a href="${ctx}/index">首页</a></li>
    <li class="layui-nav-item"><a href="${ctx}/user/index">用户</a></li>
    <li class="layui-nav-item  layui-this"><a href="${ctx}/permission/index">菜单</a></li>
    <li class="layui-nav-item"><a href="">学习</a></li>
    <li class="layui-nav-item"><a href="${ctx}/photo/index">相册</a></li>
    <li class="layui-nav-item"><a href="${ctx}/user/onLineUsers">在线用户</a></li>
    <li class="layui-nav-item"><a href="${ctx}/gen/index">代码生成</a></li>
    <li class="layui-nav-item" style="float: right"><a href="/layout">退出</a></li>
</ul>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="demoTable">
                菜单名称：
                <div class="layui-inline">
                    <input class="layui-input" name="name" id="name" autocomplete="off">
                </div>
                <button id="search" class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        element.on('nav(tab)', function(data){
            var href = data[0].href;
            location.href = href;
        })
    })

    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            ,height: 'full - 200'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,url: '${ctx}/permission/getAll' //数据接口
            ,toolbar: '#toolbarDemo'
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{title:'序号', type:'numbers'}
                ,{field: 'name', title: '菜单名称'}
                ,{field: 'type', title: '类型'}
                ,{field: 'sort', title: '排序'}
                ,{field: 'url', title: '链接'}
                ,{field: 'icon', title: '图标'}
                ,,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,response: {
                countName: 'total'
                ,dataName: 'records'
            }
        });

        active = {
            reload: function(){
                var name = $('#name').val();
                //执行重载
                tableIns.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: name
                    }
                });
            }
        };

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
    // 重载
    $('#search').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
</script>
</body>
</html>